<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./output.css">
</head>

<body>

    <div class="flex">
        <div class="bg-blue-500 p-4 mr-auto">
            这个块级元素会向左对齐
        </div>
        <div class="bg-green-500 p-4">
            另一个块级元素
        </div>
    </div>
    <div class="flex   my-2">
        <div class="bg-blue-500 p-4 order-2 mr-auto">
            这个块级元素会向左对齐
        </div>
        <div class="bg-green-500 p-4 order-1 ml-auto">
            另一个块级元素
        </div>
    </div>
    <div class="flex">
        <div class="bg-blue-500 p-4 order-1">
            这个块级元素会向左对齐
        </div>
        <div class="bg-green-500 p-4 order-2">
            另一个块级元素
        </div>
    </div>
    <div class="flex justify-end ">
        <div class="bg-blue-500 p-4 w-1/3 mr-auto">
            这个块级元素会向左对齐
        </div>
        <div class="bg-green-500 p-4   ml-auto">
            另一个块级元素
        </div>
    </div>

</body>

</html>